<template>
  <div class="container">
    <div class="main">
      <div class="left">
        <router-link to="/developmentguide" class="item">开发指南</router-link>
        <router-link to="/apidocument" class="item">API文档</router-link>
        <router-link to="/message" class="item">消息文档</router-link>
        <router-link to="/extensionPoint" class="item">扩展点文档</router-link>
        <router-link to="/frontextension" class="item">前端扩展</router-link>
        <router-link to="/solution" class="item">解决方案</router-link>
        <router-link to="/commonproblem" class="item">常见问题</router-link>
        <router-link to="/operationnorm" class="item item1" >运营规范</router-link>
        <router-link to="/announcement" class="item item2">平台公告</router-link>
      </div>
      <div class="right">
        <a href="https://diy.youzanyun.com" class="panel-item"><img
            src="https://b.yzcdn.cn/app-doc/img/kongzhitai.png">控制台</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    
  }
}
</script>
<style lang="less" scoped>
a {
  color: currentColor;
}

.container {

  width: 100%;
  background-color: #fff;
  box-shadow: 0 8px 8px #ebedf0;
  z-index: 2;
  position: sticky;
  top: 0;

  .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 48px;
    margin: 0 auto;
    background-color: #fff;

    .left {
      display: flex;
      justify-content: space-between;
      width: 896px;

      .item {
        display: flex;
        align-items: center;
        height: 24px;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        color: currentColor;

        &.router-link-exact-active {
          color: #155bd4;
        };
        &.router-link-active{
              color: #155bd4;
        }
      }


    }

    .panel-item {
      display: flex;
      align-items: center;
      height: 24px;
      font-size: 14px;
      cursor: pointer;

      img {
        width: 1em;
        height: 1em;
        margin: 0 0.5em;
      }
    }
  }

}
</style>